.input{
    border:1px solid red ;
}
.show{
    animation: show-item 2s ease-in forwards;
}

.hide{
   animation: hide-item 2s ease-in forwards;
}
@keyframes show-item {
    0%{
        opacity: 0;
        color: red;
    }
    50%{
        opacity: 0.5;
        color: goldenrod;
    }
    100%{
        opacity: 1;
        color: blue;
    }
}
@keyframes hide-item {
    0%{
        opacity: 1;
        color: red;
    }
    50%{
        opacity: 0.5;
        color: goldenrod;
    }
    100%{
        opacity: 0;
        color: blue;
    }
}